<template>
    <div id="siteInfo" style="height: 85vh;">
        <page-header title="基站查询" />
        <page-main style="height: calc(100% - 62px);">
            <el-form
                ref="searchForm"
                :model="searchForm"
                :inline="true"
                class="demo-form-inline"
            >
                <el-form-item label="站点ID">
                    <el-input v-model="searchForm.siteid" />
                </el-form-item>
                <el-form-item label="站点名称">
                    <el-input v-model="searchForm.sitename" />
                </el-form-item>
                <el-form-item label="卡号">
                    <el-input v-model="searchForm.phone" />
                </el-form-item>
                <el-form-item label="IMEI">
                    <el-input v-model="searchForm.imeiid" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('searchForm')">
                        查询
                    </el-button>
                    <el-button type="info" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
            <el-button
                type="warning"
                size="mini"
                style="margin-right: 15px;"
                @click="handleShow"
            >
                批量导入修改sim
            </el-button>
            <input
                v-show="dialogVisible"
                id="LAY-excel-import-excel"
                type="file"
                value="批量导入修改sim"
            >

            <span style="font-size: 14px;">
                模板下载
                <a
                    style="text-decoration: none; margin-left: 8px;"
                    :href="'/static/批量修改sim模板.xlsx'"
                    >批量修改sim模板.xlsx</a>
            </span>

            <el-table
                v-loading="loading"
                :data="searchList"
                height="calc(100% - 180px)"
                style="overflow-y: auto;"
            >
                <el-table-column prop="siteid" label="站点ID" min-width="60">
                    <template slot-scope="scope">
                        {{ scope.row.siteid }}
                    </template>
                </el-table-column>
                <el-table-column prop="city" label="城市" min-width="60">
                    <template slot-scope="scope">
                        {{ scope.row.city }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="county"
                    :show-overflow-tooltip="true"
                    label="县份"
                    min-width="60"
                >
                    <template slot-scope="scope">
                        {{ scope.row.county }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="sitename"
                    :show-overflow-tooltip="true"
                    label="基站名称"
                    min-width="160"
                >
                    <template slot-scope="scope">
                        {{ scope.row.sitename }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="sitelocation"
                    :show-overflow-tooltip="true"
                    label="基站位置"
                    min-width="160"
                >
                    <template slot-scope="scope">
                        {{ scope.row.sitelocation }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="phone"
                    :show-overflow-tooltip="true"
                    label="卡号"
                    min-width="120"
                >
                    <template slot-scope="scope">
                        {{ scope.row.phone }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="simstatus"
                    :show-overflow-tooltip="true"
                    label="sim状态"
                    min-width="60"
                >
                    <template slot-scope="scope">
                        {{ scope.row.simstatus }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="powerstatus"
                    :show-overflow-tooltip="true"
                    label="市电状态"
                    min-width="60"
                >
                    <template slot-scope="scope">
                        {{ scope.row.powerstatus }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="electricstatus"
                    :show-overflow-tooltip="true"
                    label="发电状态"
                    min-width="60"
                >
                    <template slot-scope="scope">
                        {{ scope.row.electricstatus }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="downstatus"
                    :show-overflow-tooltip="true"
                    label="退服状态"
                    min-width="60"
                >
                    <template slot-scope="scope">
                        {{ scope.row.downstatus }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="endurance"
                    :show-overflow-tooltip="true"
                    label="续航时间"
                    min-width="60"
                >
                    <template slot-scope="scope">
                        {{ scope.row.endurance }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="imeiid"
                    :show-overflow-tooltip="true"
                    label="imei"
                    min-width="120"
                >
                    <template slot-scope="scope">
                        {{ scope.row.imeiid }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="ipv6"
                    :show-overflow-tooltip="true"
                    label="ipv6"
                    min-width="160"
                >
                    <template slot-scope="scope">
                        {{ scope.row.ipv6 }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="success"
                            @click="handleEdit(scope.row)"
                        >
                            修改
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-box">
                <el-pagination
                    :current-page="pagination.currentPage"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    style="width: fit-content;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
            <site-Edit
                v-if="selectVisible"
                ref="siteEdit"
                :dialogswitch.sync="selectVisible"
                @closeChange="closedialog(arguments)"
            />
        </page-main>
    </div>
</template>
<script>
import siteEdit from "./../basic_data/siteedit.vue";
import LAY_EXCEL from "lay-excel";
export default {
    components: {
        siteEdit
    },
    data() {
        return {
            selectVisible: false,
            total: 0,
            searchForm: {
                siteid: "",
                sitename: "",
                phone: "",
                imeiid: "",
                city: "",
                county: "",
                simstatus: ""
            },
            searchList: [],
            pagination: {
                currentPage: 1,
                pageSize: 20
            },
            dialogVisible: false,
            loading: false
        };
    },
    created() {
        this.getData();
    },
    mounted() {},
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // eslint-disable-next-line no-debugger
                    // debugger;
                    this.getData();
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        getData() {
            this.loading = true;
            this.$api
                .get("/electricApi/datasite/", {
                    params: {
                        token: this.$store.state.user.token,
                        siteid: this.searchForm.siteid,
                        sitename: this.searchForm.sitename,
                        imeiid: this.searchForm.imeiid,
                        page: this.pagination.currentPage,
                        page_size: this.pagination.pageSize,
                        phone: this.searchForm.phone
                    }
                })
                .then(res => {
                    this.loading = false;
                    this.searchList = res.results;
                    this.total = res.count;
                });
        },
        handleEdit(row) {
            // 呈现弹窗的标题，联系人，传递属性值(区公司，市公司，自有/三方，扩展，传递属性标签
            this.selectVisible = true;
            this.$nextTick(() => {
                this.$refs.siteEdit.dataInitialization(row);
            });
        },
        closedialog(flag) {
            if (flag) {
                // updateTable()
                console.log("刷新数据");
            }
            this.selectVisible = false;
        },
        reset() {
            this.searchForm = {
                siteid: "",
                sitename: "",
                phone: "",
                imeiid: "",
                city: "",
                county: "",
                simstatus: ""
            };
            this.pagination = {
                currentPage: 1,
                pageSize: 20
            };
            this.getData();
        },
        // 批量导入
        handleImport(files) {
            let _this = this;
            LAY_EXCEL.importExcel(
                files,
                {
                    fields: {
                        siteid: "A",
                        phone: "B"
                    }
                },
                function(data) {
                    data[0].Sheet1.shift();
                    let submitData = data[0].Sheet1;
                    _this.batchEdit(0, submitData.length, submitData);
                }
            );
        },
        batchEdit(i, length, data) {
            // eslint-disable-next-line no-debugger
            // debugger;
            const loading = this.$loading({
                lock: true,
                text: "正在批量修改，请稍等......",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)"
            });
            let obj = this.searchList.find(
                item => item.siteid == data[i].siteid
            );
            // console.log(obj, loading);
            obj.phone = data[i].phone;
            console.log("obj.siteid", obj.siteid);
            let _this = this;
            this.$api
                .put(`/electricApi/datasite/${data[i].siteid}/`, obj)
                .then(res => {
                    console.log(res);
                    if (++i < length) {
                        // 回调解决循环中的异步问题
                        setTimeout(() => {
                            _this.batchEdit(i, length, data);
                        }, 100);
                    } else {
                        loading.close();
                        _this.$message.success("批量修改成功");
                    }
                });
        },
        handleShow() {
            this.dialogVisible = true;
            let excelImport = document.getElementById("LAY-excel-import-excel");

            excelImport.addEventListener("change", e => {
                // console.log("e.target.files", e.target.files);
                this.handleImport(e.target.files);
            });
        },
        handleSizeChange(e) {
            this.pagination.pageSize = e;
            this.getData();
        },
        handleCurrentChange(e) {
            this.pagination.currentPage = e;
            this.getData();
        }
    }
};
</script>
<style>
#siteInfo .el-button {
    margin-left: 10px;
}
.pagination-box {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>
